<template>
    <div style="width: 100%;position: relative;height: 100%;">
        <div id="search">
            <el-form :model="listQuery" :inline="true" ref="formQuery" label-width="70px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="项目名称" prop="projectName">
                            <el-input size="small" style="width: 80%;" v-model="listQuery.projectName"
                                      placeholder="请输入项目名称" clearable
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="项目状态" prop="projectStatus">
                            <el-select size="small" v-model="listQuery.projectStatus" placeholder="请选择项目状态"
                                       style="width: 70%" clearable>
                                <el-option label="待处理" value="0"></el-option>
                                <el-option label="进行中" value="1"></el-option>
                                <el-option label="已完成" value="2"></el-option>
                                <el-option label="被驳回" value="-1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item>
                            <el-button type="success" size="small" icon="el-icon-plus" @click="handleAdd"></el-button>
                            <el-button type="primary" size="small" icon="el-icon-search" @click="search"></el-button>
                            <el-button size="small" type="danger" @click="deleteBatch"
                                       icon="el-icon-delete"></el-button>
                            <el-button size="small" @click="resetQuery('formQuery')">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <div id="table">
            <el-table border :data="list" style="width: 100%" v-loading="loading"
                      @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="45" align="center"/>
                <el-table-column type="index" width="65" label="#序号" align="center"/>
                <el-table-column prop="projNumber" width="160" label="项目编码" align="center"/>
                <el-table-column prop="projName" label="项目名称"  width="250" align="center"/>
                <el-table-column prop="createTime"  width="130" label="开始时间" align="center">
                    <template slot-scope="{row}">
                        <span>{{row.projStartTime}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="状态" class-name="status-col" width="120" align="center">
                    <template slot-scope="{row}">
                        <el-tag size="small" v-if="row.projStatus == 0">待处理</el-tag>
                        <el-tag size="small" v-if="row.projStatus == 1" type="info">进行中</el-tag>
                        <el-tag size="small" v-if="row.projStatus == 2" type="success">已完成</el-tag>
                        <el-tag size="small" v-if="row.projStatus == -1" type="danger">被驳回</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime"  width="170" label="创建时间" align="center">
                    <template slot-scope="{row}">
                        <span>{{row.createTime}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <!--被驳回状态-->
                        <template v-if="scope.row.projStatus =='-1'">
                            <el-tooltip class="item" effect="dark" content="编辑" placement="top-start">
                                <el-button size="small" type="text" icon="el-icon-edit"
                                           @click="handleEdit(scope.row)"></el-button>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="待处理" placement="top-start">
                                <el-button size="small" type="text" icon="el-icon-s-promotion"
                                           @click="handleStatus(scope.row,'0')"></el-button>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                                <el-button size="small" type="text" icon="el-icon-folder-delete"
                                           @click="handleDelete(scope.row)"
                                ></el-button>
                            </el-tooltip>
                        </template>
                        <!--待处理-->
                        <template v-if="scope.row.projStatus =='0'">
                            <el-tooltip class="item" effect="dark" content="编辑" placement="top-start">
                                <el-button size="small" type="text" icon="el-icon-edit"
                                           @click="handleEdit(scope.row)"></el-button>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="开始" placement="top-start">
                                <el-button size="small" type="text" icon="el-icon-video-play"
                                           @click="handleStatus(scope.row,'1')"></el-button>
                            </el-tooltip>
                        </template>

                        <!--进行中-->
                        <template v-if="scope.row.projStatus =='1'">
                            <el-tooltip class="item" effect="dark" content="完成" placement="top-start">
                                <el-button size="small" type="text" icon="el-icon-finished"
                                           @click="handleStatus(scope.row,'2')"></el-button>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="驳回" placement="top-start">
                                <el-button size="small" type="text" icon="el-icon-question"
                                           @click="handleStatus(scope.row,'-1')"></el-button>
                            </el-tooltip>
                        </template>
                        <!--已完成-->
                        <template v-if="scope.row.projStatus =='2'">
                            <el-tooltip class="item" effect="dark" content="查看" placement="top-start">
                                <el-button size="small" type="text" icon="el-icon-view" @click="detail(scope.row)"
                                ></el-button>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                                <el-button size="small" type="text" icon="el-icon-folder-delete"
                                           @click="handleDelete(scope.row)"
                                ></el-button>
                            </el-tooltip>
                        </template>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <div class="block" style="margin-top: 10px;position: absolute;right: 0;">
                <el-pagination :page-sizes="[10]" :page-size="listQuery.pageSize" @current-change="handleCurrentChange"
                               layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>

        <!--项目对话框-->
        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogVisible" width="42%">
            <el-form ref="form" :rules="rules" :model="form" label-position="left" label-width="80px"
                     style="width: 400px; margin-left:50px;">
                <el-form-item label="项目名称" prop="projName">
                    <el-input size="small" v-model="form.projName" placeholder="请输入项目名称"
                              :disabled="dialogStatus =='detail'? true:false "/>
                </el-form-item>
                <el-form-item label="项目编码" prop="projNumber">
                    <el-input size="small" v-model="form.projNumber" placeholder="请输入编码"
                              :disabled="dialogStatus !='create'? true:false "/>
                </el-form-item>
                <el-form-item label="项目状态" prop="projStatus">
                    <el-select size="small" :disabled="dialogStatus !='create'? true:false" v-model="form.projStatus"
                               placeholder="请选择项目状态" style="width: 52%">
                        <el-option label="待处理" value="0" v-if=""></el-option>
                        <el-option label="进行中" value="1"></el-option>
                        <el-option label="已完成" value="2"></el-option>
                        <el-option label="被驳回" value="-1" v-if="dialogStatus !='create'?true:false"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="开始时间" prop="projStartTime">
                    <el-date-picker :disabled="dialogStatus =='detail'? true:false " size="small"
                                    value-format="yyyy-MM-dd" v-model="form.projStartTime" type="date"
                                    placeholder="选择开始日期"
                                    style="width: 52%" :picker-options="selectAfter"></el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间" prop="projEndTime">
                    <el-date-picker :disabled="dialogStatus =='detail'? true:false " size="small"
                                    value-format="yyyy-MM-dd" v-model="form.projEndTime" type="date"
                                    placeholder="选择结束日期"
                                    style="width: 52%" :picker-options="selectAfter"></el-date-picker>
                </el-form-item>
                <el-form-item label="项目描述">
                    <el-input :disabled="dialogStatus =='detail'? true:false " size="small" v-model="form.projDescp"
                              :autosize="{ minRows: 4}" type="textarea"
                              placeholder="请输入项目描述"/>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size='medium' @click="dialogVisible = false">
                    取消
                </el-button>
                <el-button v-if="dialogStatus =='detail'? false:true " size='medium' type="primary"
                           @click="submit('form')">
                    确定
                </el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script>
    export default {
        name: "project-list",
        data() {
            return {
                //获取今后的时间
                selectAfter: {
                    disabledDate(time) {
                        return time.getTime() < new Date();
                    }
                },
                selectData: [],
                listQuery: {
                    pageNum: 1,
                    pageSize: 10
                },
                loading: true,
                list: [],
                total: undefined,
                dialogVisible: false,
                form: {
                    id: undefined
                },
                //角色项
                roleOptions: [],
                //部门项
                deptOptions: [],
                //校验
                rules: {
                    projName: [{required: true, message: '请输入项目', trigger: 'blur'}],
                    projNumber: [{required: true, message: '请输入项目编码', trigger: 'blur'}],
                    projStatus: [{required: true, message: '选择状态', trigger: 'blur'}],
                    projStartTime: [{required: true, message: '请选择开始时间', trigger: 'blur'}],
                    projEndTime: [{required: true, message: '请选择结束时间', trigger: 'blur'}],
                },
                docRules: {
                    projId: [{required: true, message: '请输入项目名称', trigger: 'change'}],
                    documentName: [{required: true, message: '请输入文档名称', trigger: 'blur'}],
                },
                docForm: {},
                dialogStatus: "",
                textMap: {
                    update: "编辑项目",
                    create: "新增项目",
                    detail: "详情",
                },
                documentDialog: false,
                fileList: [],  //文件列表
                projectLoading: false,
                projOptions: [],
                projId: ""
            }
        },
        methods: {
            //获取列表
            getList() {
                this.$post("/project/list", this.listQuery).then(res => {
                    if (res.code == 200) {
                        this.loading = false;
                        this.list = res.data.records;
                        this.total = res.data.total;
                    }
                })
            },
            //查询
            search() {
                this.listQuery.pageNum = 1;
                this.getList();
            },
            //查看
            detail(row) {
                this.dialogStatus = "detail";
                this.$get('/project/getDetail', {projId: row.id}).then(res => {
                    if (res.code == 200) {
                        this.form = res.data;
                    }

                })
                this.dialogVisible = true;
            },
            //新增
            handleAdd() {
                this.dialogStatus = "create";
                this.form = {};
                this.dialogVisible = true;
            },
            //编辑
            handleEdit(row) {
                this.dialogStatus = "update";
                this.$get('/project/getDetail', {projId: row.id}).then(res => {
                    if (res.code == 200) {
                        this.form = res.data;
                    }

                })
                this.dialogVisible = true;
            },
            //删除
            handleDelete(row) {
                this.$confirm('是否确定删除该项目, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$get("/project/delete", {projId: row.id}).then(res => {
                        if (res.code == 200) {
                            this.$message.success("删除成功");
                            this.getList();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //批量删除
            deleteBatch() {
                if (this.selectData.length <= 0) {
                    this.$message.warning("请至少选择一条数据删除");
                    return;
                }
                this.$confirm('是否确定删删除这【' + this.selectData.length + '】条数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    var ids = [];
                    this.selectData.forEach(item => {
                        ids.push(item.id);
                    });

                    this.$post("/project/deleteBatch", {ids: ids}).then(res => {
                        if (res.code == 200) {
                            this.$message.success("删除成功");
                            this.getList();
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //提交
            submit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // console.log(this.form);
                        this.$post("/project/save", this.form).then(res => {
                            if (res.code == 200) {
                                this.$message.success("操作成功");
                                //关闭对话框
                                this.dialogVisible = false;
                                //重新渲染数据
                                this.getList();
                            }
                            else {
                                this.$message.error(res.msg);
                            }
                        })

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //表格选择
            handleSelectionChange(data) {
                this.selectData = data;
                //console.log(this.selectData);
            },
            //状态改变
            handleStatus(row, status) {
                var statusString = "";

                if (status == '-1') {
                    statusString = "被驳回";
                }
                else if (status == '0') {
                    statusString = "待处理";
                } else if (status == '1') {
                    statusString = "进行中";
                } else if (status == '2') {
                    statusString = "已完成";
                }

                var json = "修改该项目状态为【" + statusString + "】";

                this.$confirm('是否' + json + ', 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$get("/project/changeStatus", {projId: row.id, status: status}).then(res => {
                        if (res.code == 200) {
                            this.$message.success("操作成功");
                            this.getList();
                        } else {
                            this.$message.error("操作失败");
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '操作取消'
                    });
                });
            },
            //重置
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            //清空搜索条件
            resetQuery(formName) {
                this.$refs[formName].resetFields();
            },
            //分页改变
            handleCurrentChange(val) {
                this.listQuery.pageNum = val;
                this.getList();
            },
            //增加文档
            addDocument() {
                this.docForm = {};
                this.fileList = [];
                this.documentDialog = true;
            },
            //上传成功的回调函数
            uploadSuccess(response, file, fileList) {
                console.log(response, fileList, file);
            },
            //上传失败的回调函数
            uploadError(err, file, fileList) {
                console.log(err, file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            //远程搜索项目
            remoteProject(query) {
                if (query !== '') {
                    this.projectLoading = true;
                    this.$get("/project/selectList").then(res => {
                        if (res.code == 200) {
                            this.projectLoading = false;
                            this.projectStates = res.data;
                            this.projOptions = this.projectStates.filter(item => {
                                return item.projName.indexOf(query) > -1;
                            });
                        }
                    })

                } else {
                    this.projOptions = [];
                }
            },
            //上传文件
            submitUpload(formName) {
                //console.log(this.fileList);
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (this.fileList.length <= 0) {
                            this.$message.warning("未选择上传文件");
                            return;
                        }
                        let formData = new FormData();
                        for (let i = 0; i < this.fileList.length; i++) {
                            formData.append("files", this.fileList[i]);
                        }

                        formData.append("projId", this.docForm.projId);
                        formData.append("documentName", this.docForm.documentName);
                        this.$post("/document/upload", formData).then(res => {
                            console.log(res);
                            if (res.code == 200) {
                                this.$notify.success("上传成功");
                                this.documentDialog = false;
                                //清楚上传文档列表
                                this.$refs.upload.clearFiles();
                            } else {
                                this.$notify.error(res.msg);
                            }
                        })


                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });


            },
            //文件改变
            changeDocument(file) {
                console.log(file);
                this.fileList.push(file.raw);
            },
        },
        created() {
            this.getList();
        }
    }

</script>

<style scoped>
    #table {
        padding: 0 20px;
    }

    #search {
        padding: 20px;
    }

    /deep/ .el-upload-dragger {
        width: 145%;
    }
</style>